window.onload = function() {
  var itemList = [];
  // 获取DOM元素
  function getE(id) {
    return document.getElementById(id);
  }

  //处理输入的字符串
  function getVal() {
    var text = getE('in').value;
    var splitReg = /\s+|\s*[,|，|、]\s*/;
    var strReg = /[^\u4e00-\u9fa5a-zA-Z0-9\s,，、]/ig;
    var flag = strReg.test(text);
    // if (flag) {
    //   alert('输入的内容中含非法字符串，请确保输入内容为 数字、中文、英文,回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等)');
    //   return null;
    // }
    var list = text.split(splitReg);
    return list;
  }

  // 初始化DOM元素
  var contianer = getE('box');
  var leftin = getE('leftin');
  var rightin = getE('rightin');
  var leftout = getE('leftout');
  var rightout = getE('rightout');
  var serch = getE('serch');
  var serchBtn = getE('serch-btn');

  // 新建一个节点
  function creatNewItem(val) {
    var item = document.createElement('div');
    item.className = 'items';
    item.innerHTML = val;
    return item;
  }

  // 左侧入
  function leftIn() {
    // 获取input的值
    var vals = getVal();

    // 当node存在则插入第一位
    vals && (itemList = vals.concat(itemList));
    rendder();
  }

  // 右侧入
  function rightIn() {
    var val = getVal();
    vals && (itemList = itemList.concat(vals));
    rendder();
  }

  // 左侧出
  function leftOut() {
    var val = itemList.shift();
    alert(val);
    rendder();
  }

  // 右侧出
  function rightOut() {
    var val = itemList.pop();
    alert(val);
    rendder();
  }

  // 单价节点删除
  function cdel(e) {
    var node = e.target;
    if (node.className.toUpperCase() === 'ITEMS') {
      var index = node.getAttribute('index');
      alert(itemList[index]);
      itemList.splice(index, 1);
      rendder();
    }
  }

  // 渲染
  function rendder() {
    contianer.innerHTML = '';
    var len = itemList.length;
    var doc = document.createDocumentFragment();
    for (var i = 0; i < len; i++) {
      var item = creatNewItem(itemList[i]);
      item.setAttribute('index', i);
      doc.appendChild(item);
    }
    contianer.appendChild(doc);
  }

  // 查询
  function seachf() {
    var val = serch.value;
    var len = itemList.length;
    var items = contianer.getElementsByTagName('div');
    for (var i = 0; i < len; i++) {
      var str = itemList[i];
      var index = str.indexOf(val);
      if(index!==-1){
        items[i].style.color = 'red';
      }else{
        items[i].style.color = '';
      }
    }
  }

  // 定义事件
  leftin.addEventListener('click', leftIn, false);
  rightin.addEventListener('click', rightIn, false);
  leftout.addEventListener('click', leftOut, false);
  rightout.addEventListener('click', rightOut, false);
  contianer.addEventListener('click', cdel, false);
  serchBtn.addEventListener('click', seachf, false);
};
